<template>
  <div class="clearfix">
    <div style="margin:200px 20px auto">
      <span style="font-size:40px">接口测试平台</span>
      <span style="font-size:16px;display: block;position:relative;left:135px">@曹鹏</span>
    </div>
    <!--登录信息-->
    <div style="width:500px;text-align: center;margin: -35px auto">
      <el-form inline style="width: 500px" label-position="right" label-width="80px">
        <el-form-item label="用户名：" style="margin-top:50px" >
          <el-input v-model="loginInfo.username" style="width: 300px" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码：" >
          <el-input v-model="loginInfo.password" style="width: 300px" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login()">登录</el-button>
          <el-button @click="dialogFormVisible=true">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--注册信息-->
    <div>
      <el-dialog :title="dialog_title" :visible.sync="dialogFormVisible" width="550px">
        <el-form label-width="100px" label-postio="right">
          <el-form-item label="用户名：">
            <el-input v-model="registerInfo.username" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input v-model="registerInfo.password" style="width: 400px" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码：">
            <el-input v-model="registerInfo.passwordSure" style="width: 400px" show-password></el-input>
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input v-model="registerInfo.email" style="width: 400px"></el-input>
          </el-form-item>
          <el-button type="primary" @click="dialogFormVisible=false">取消</el-button>
          <el-button type="primary" @click="register()">确定</el-button>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
    name: 'login',
    data() {
        return {
            loginInfo: {
                username: "admin",
                password: "123456",
            },
            dialog_title: "注册用户信息",
            dialogFormVisible: false,
            registerInfo: {
                username: "",
                password: "",
                passwordSure: "",
                email: "",
            },
        }
    },
    methods: {
        register() {
            this.$axios.post("api/register/", {"registerInfo": this.registerInfo})
                .then(response => {
                    console.log(response.data);
                    if (response.data.registerMsg === "1") {
                        console.log("注册用户成功");
                        this.dialogFormVisible = false;
                        this.$message({
                            showClose: true,
                            message: "注册用户成功",
                            type: 'success'
                        })
                    } else {
                        console.log("注册用户失败");
                        this.dialogFormVisible = true;
                        this.$message({
                            showClose: true,
                            message: "注册用户失败",
                            type: 'error'
                        })
                    }

                })
                .catch(error => {
                    console.log(error)
                })
        },
        login() {
            this.$axios.post("api/login/", {"username": this.loginInfo.username, 'password': this.loginInfo.password})
                .then(response => {
                    if (response.data.msgCode === "1") {
                        console.log(response.data);
                        console.log("登录成功");
                        sessionStorage.setItem('username', this.loginInfo.username);
                        this.$router.push({path: "/base"});
                    } else {
                        console.log("登录失败");
                        this.$router.push({path: "/login"})
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        }
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'background:url("../static/image/bg.jpg") no-repeat fixed center')
    },
    beforeDestroy() {
        document.querySelector('body').removeAttribute('style')
    }
}
</script>

<style>

</style>
